---
title: Collapsible
description: A dynamic element that facilitates the expansion or collapse of a panel.
---

{/* prettier-ignore-start */}
{/* prettier-ignore-end */}

import Code from '@/components/Code.astro';
import { LinkButton } from '@/components/react/LinkButton';
import { Aside, Tabs, TabItem } from '@astrojs/starlight/components';
import importedCode from '@rnr/reusables/components/ui/collapsible?raw';

<LinkButton href="https://rn-primitives.vercel.app/collapsible">
  Collapsible Primitive
</LinkButton>
<LinkButton target="_blank" href="https://rnr-showcase.vercel.app/collapsible">
  Demo
</LinkButton>

<br />

A dynamic element that facilitates the expansion or collapse of a panel.

### Installation

<Tabs>
  <TabItem label='CLI'> 
    ```bash
    npx @react-native-reusables/cli@latest add collapsible
    ```
  </TabItem>
  <TabItem label='Manual'>
    <Aside type="tip" title="Dependency">
        Before copy/pasting, add the <a href="https://rn-primitives.vercel.app/collapsible" className='text-white font-bold'>Collapsible primitive</a> to your project.
    </Aside>

    <br />

    **Copy/paste the following code to `~/components/ui/collapsible.tsx`:**


    <Code code={importedCode} lang="tsx" title="~/components/ui/collapsible.tsx" />
  </TabItem>
</Tabs>

## Usage

```tsx
import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '~/components/ui/collapsible';
import { Text } from '~/components/ui/text';

function Example() {
  return (
      <Collapsible>
            <CollapsibleTrigger >
               <Text>Toggle</Text>
            </CollapsibleTrigger>
            <CollapsibleContent >
              <Text>@radix-ui/react</Text>
            </CollapsibleContent>
      </Collapsible>
  );
}
```

## Props

### Collapsible

Extends [`View`](https://reactnative.dev/docs/view#props) props

|     Prop     |           Type           |     Note     |
| :----------: | :----------------------: | :----------: |
|   asChild    |         boolean          | _(optional)_ |
|     open     |         boolean          | _(optional)_ |
| onOpenChange | (value: boolean) => void | _(optional)_ |
| defaultOpen  |         boolean          | _(optional)_ |
|   disabled   |         boolean          | _(optional)_ |

### CollapsibleTrigger

Extends [`Pressable`](https://reactnative.dev/docs/pressable#props) props

|   Prop   |  Type   |     Note     |
| :------: | :-----: | :----------: |
| asChild  | boolean | _(optional)_ |

### CollapsibleContent

Extends [`View`](https://reactnative.dev/docs/view#props) props

|    Prop    |        Type        |     Note     |
| :--------: | :----------------: | :----------: |
|  asChild   |      boolean       | _(optional)_ |
| forceMount | true \| undefined; | _(optional)_ |
